import React from 'react';
import {Checkbox} from 'antd';
const CheckboxGroup = Checkbox.Group;

const plainOptions = ['无变化', '新增', '修改', '删除', '受影响'];
const defaultCheckedList = ['无变化', '新增', '修改', '删除', '受影响'];

class HeadContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: true,
    };
  }

  getCheckStatus(checkedList) {
    //复选框数据
    var status = '';
    if (checkedList.indexOf('无变化') >= 0) {
      status += '1';
    } else {
      status += '0';
    }
    if (checkedList.indexOf('新增') >= 0) {
      status += '1';
    } else {
      status += '0';
    }
    if (checkedList.indexOf('修改') >= 0) {
      status += '1';
    } else {
      status += '0';
    }
    if (checkedList.indexOf('删除') >= 0) {
      status += '1';
    } else {
      status += '0';
    }
    if (checkedList.indexOf('受影响') >= 0) {
      status += '1';
    } else {
      status += '0';
    }
    return status;
  }

  onChange(checkedList) {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
      checkAll: checkedList.length === plainOptions.length,
    });
    this.props.signal.dispatch(this.getCheckStatus(checkedList));
  }

  onCheckAllChange(e) {
    var checkedList = e.target.checked ? plainOptions : [];
    this.setState({
      checkedList: checkedList,
      indeterminate: false,
      checkAll: e.target.checked,
    });
    this.props.signal.dispatch(this.getCheckStatus(checkedList));
  }

  render() {

    return (
      <div>
        <div style={{borderBottom: '1px solid #E9E9E9'}}>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange.bind(this)}
            checked={this.state.checkAll}
          >
            全选
          </Checkbox>
        </div>
        <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange.bind(this)}/>
        <br />
      </div>
    );
  }
}

export default HeadContainer;
